<template>
  <div>
    <div class="container">
      <div class="header">
        <el-form inline>
          <el-form-item label="线路名称">
            <el-input v-model="lineName"></el-input>
          </el-form-item>
          <el-form-item label="桩号">
            <el-input v-model="no"></el-input>
          </el-form-item>
          <el-button @click="doGetPositions()">搜索</el-button>
          <el-button @click="toImport()">导入数据</el-button>
          <!--<el-button
            v-loading.fullscreen.lock="fullscreenLoading"
            element-loading-text="正在导出，请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            @click="getImages()"
          >
            导出图片
          </el-button>-->
        </el-form>
        <div style="display: flex">
          <el-upload
            v-loading.fullscreen.lock="fullscreenLoading"
            element-loading-text="正在导入，请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            ref="upload"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :data="{ type: 1, prjId: this.prjId }"
            :action="uploadPath"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">
              批量导入勘察图片
            </el-button>
          </el-upload>
          <el-upload
            ref="upload"
            style="margin-left: 20px"
            v-loading.fullscreen.lock="fullscreenLoading"
            element-loading-text="正在导入，请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :data="{ type: 2, prjId: this.prjId }"
            :action="uploadPath"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">
              批量导入遥感图片
            </el-button>
          </el-upload>
        </div>
      </div>
      <el-table :data="datas">
        <el-table-column label="序号" prop="DSPS_ID"></el-table-column>
        <el-table-column label="桩号" prop="DSPS_No"></el-table-column>
        <el-table-column
          label="线路名称"
          prop="DSPS_LineName"
        ></el-table-column>
        <el-table-column label="经度" prop="DSPS_Lat"></el-table-column>
        <el-table-column label="纬度" prop="DSPS_lng"></el-table-column>
        <el-table-column label="免赔" prop="DSPS_NoPayPrice"></el-table-column>
        <el-table-column label="理算" prop="DSPS_PayPrice"></el-table-column>
        <el-table-column label="报案日期">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.DSPS_ReportDate == null
                  ? '未确定'
                  : scope.row.DSPS_ReportDate.split(' ')[0]
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="毁损日期" prop="DSPS_DestroyDateDes">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.DSPS_DestroyDateDes == null
                  ? '未确定'
                  : scope.row.DSPS_DestroyDateDes
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :id="scope.index == 0 ? '' : 'step1'"
              @click="toDetailPage(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageIndex"
        :total="total"
        :page-size.sync="pageSize"
        :page-sizes="[10, 20]"
        @size-change="
          (val) => {
            pageSize = val
            doGetPositions()
          }
        "
        @current-change="doGetPositions()"
      />
    </div>
    <el-dialog :visible.sync="addImgVis" destroy-on-close title="添加图片">
      <uploadImageForm
        @closeDialog="closeDialog"
        :position="currentPst"
      ></uploadImageForm>
    </el-dialog>
    <el-dialog title="毁损日期" :visible.sync="dialogFormVisible">
      <!--<el-date-picker
        v-model="DestroyDate"
        type="date"
        placeholder="选择日期">
      </el-date-picker>-->
      <el-input v-model="DestroyDate" placeholder="请输入日期"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setDestroyDate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetPositions,
  GetImageZip,
  GetReportDate,
  SetDestroyDate,
  GetSumDate,
} from '@/api/project/position.js'
import uploadImageForm from '../components/uploadImage.vue'
import { baseURL } from '@/config'
export default {
  components: { uploadImageForm },
  computed: {},
  data: function () {
    return {
      prjId: 0,
      uploadPath: baseURL + '/api/project/position/UploadPositionImageZip',
      name: '',
      currentPst: null,
      DestroyDate: null,
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      addImgVis: false,
      dialogFormVisible: false,
      datas: [],
      reportDate: null,
      destroyDate: null,
      lineName: null,
      no: null,
      reportDates: [],
      destroyDates: [],
      fileList: [],
      fullscreenLoading: false,
    }
  },
  methods: {
    doGetPositions() {
      GetPositions(
        this.prjId,
        this.pageIndex,
        this.pageSize,
        this.lineName,
        this.no
      ).then((r) => {
        this.total = r.data.total
        this.datas = r.data.datas
      })
    },
    getImages() {
      window.open(baseURL + '/api/ShowData/GetImageZip?prjId=' + this.prjId)
    },
    closeDialog() {
      this.addImgVis = false
    },
    beforeUpload() {
      this.fullscreenLoading = true
    },
    handleSuccess() {
      this.fullscreenLoading = false
    },
    setDestroyDate() {
      SetDestroyDate(this.currentPst.DSPS_ID, this.DestroyDate).then((r) => {
        this.dialogFormVisible = false
        this.doGetPositions()
      })
    },
    toImport() {
      this.$router.push({
        name: 'positionImport',
        query: { id: this.prjId },
      })
    },
    toDetailPage(info) {
      this.$router.push({
        name: 'positionDetail',
        query: { id: info.DSPS_ID },
      })
    },
  },
  mounted: function () {
    this.prjId = this.$route.query.id
    GetReportDate({ prjIds: [this.prjId] }).then((r) => {
      this.reportDates = r.data.report
      this.destroyDates = r.data.destroy
    })

    this.doGetPositions()
  },
}
</script>

<style scoped>
.header {
  padding: 20px;
}
.container {
  padding: 20px 10px;
  height: 90%;
  overflow: auto;
}
</style>
